<template>
  <!--  -->
  <div class="cell-item">
    <template v-if="item.type == 'image'">
      <div class="cell-img">
        <div
          class="img-item"
          v-for="(self, current) in row[item.key]"
          :key="current"
          :style="[item?.style]"
        >
          <el-image
            :src="self"
            :preview-src-list="item.imageList"
            :initial-index="current"
            fit="cover"
          />
        </div>
      </div>
    </template>
    <template v-else-if="item.type == 'btns'">
      <div class="cell-btn flex">
        <template v-for="(self, current) in item.btns" :key="current">
          <div
            class="btn-item btn"
            :style="{
              background: self.bgc || '',
              color: self.color || '',
            }"
          >
            {{ self.name }}
          </div>
        </template>
      </div>
    </template>
    <template v-else-if="item.type == 'input'">
      <div class="cell-input flex" @click="cellInputClick(row, item)">
        <el-input
          v-show="row[item.key + 'disabled']"
          v-model="row[item.key + 'clone']"
        >
        </el-input>
        <!-- <el-input
          v-show="!row[item.key + 'disabled']"
          style="pointer-events: none"
          v-model="row[item.key]"
          disabled="true"
        >
        </el-input> -->
        <div class="cell-input-text" v-show="!row[item.key + 'disabled']">
          {{ row[item.key] }}
        </div>

        <div class="flex" v-show="row[item.key + 'disabled']">
          <img
            class="operate-btn"
            @click="inputOperateClick(row, item, 'sure')"
            src="@/assets/image/yes.png"
            alt=""
          />
          <img
            class="operate-btn"
            @click="inputOperateClick(row, item, 'close')"
            src="@/assets/image/no.png"
            alt=""
          />
        </div>
      </div>
    </template>
    <template v-else>
      <div class="cell-text">{{ row[item.key] }}</div>
    </template>
  </div>
</template>

<script setup>
import { onMounted, inject } from "vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

const props = defineProps({
  row: {},
  rowIndex: {},
  item: {},
});

const emits = defineEmits("tableClick");

let num = 0;
function cellInputClick(row, item) {
  num++;
  setTimeout(() => {
    if (num > 1) {
      if (!row[item.key + "disabled"]) {
        row[item.key + "disabled"] = true;
        row[item.key + "clone"] = row[item.key];
      }
    }
    num = 0;
  }, 250);
}

function inputOperateClick(row, item, type) {
  if (type == "sure") {
    row[item.key] = row[item.key + "clone"];
    emits("tableClick", row, item);
  }
  row[item.key + "disabled"] = false;
}
</script>
<style lang="scss" scoped>
.cell-item {
  .cell-img {
    display: flex;
    flex-wrap: wrap;
    .img-item {
      width: 60px;
      height: 60px;
      padding: 5px;
      box-sizing: content-box;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .cell-btn {
    .btn-item {
      cursor: pointer;
      user-select: none;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      background-color: $theme-color;
      color: #fff;
      & + .btn-item {
        margin-left: 8px;
      }
    }
  }
  .cell-input {
    min-height: 32px;
    cursor: pointer;
    .cell-input-text {
    }
    .operate-btn {
      width: 20px;
      height: 20px;
      margin-left: 4px;
    }
  }
  .cell-text {
    text-align: center;
  }
}
</style>
